<template>
    <view class="content">
        
        <!-- 没用到，暂时不删除 -->
        
        
        <view class="u-p-20">
            <u-search placeholder="请输入名称" v-model="keyword" :show-action="false" bg-color="#fff"></u-search>
        </view>
        <view class="box">
            <!-- 柱状图 -->
            <qiun-data-charts type="column" :opts="optsBar" :chartData="chartsDataColumn1" :ontouch="true" />
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                optsBar: {
                    dataLabel: true,//是否显示图表区域内数据点上方的数据文案
                    fontSize: 11,
                    duration: 0,//动画展示时长，单位毫秒
                    padding: [15, 15, 0, 5],
                    touchMoveLimit: 24, //图表拖拽时，每秒重新渲染的帧数（用于图表拖拽卡顿，可以降低js与视图层交互的次数，理论上24帧/秒就够用了）
                    enableScroll: true, //开启图表可拖拽滚动，开启后ontouch需要赋值为true，X轴配置里需要配置itemCount单屏幕数据点数量
                    xAxis: {
                        fontSize: 11,
                        // labelCount: 20,//数据点文字（刻度点）单屏幕限制显示的数量
                        disableGrid: true,//不绘制纵向网格(即默认绘制网格)
                        scrollShow: true,//是否显示滚动条，配合拖拽滚动使用（即仅在启用【基本配置】的 enableScroll 时有效）
                        itemCount: 4, //单屏数据密度即图表可视区域内显示的X轴数据点数量，仅在启用enableScroll时有效
                    },
                    yAxis: {
                        data: [{
                            min: 0,
                            max:300 ,//X轴终止值（默认数据中的最大值）
                            fontSize: 11,
                        }]
                    },
                    extra: {
                        column: {
                            type: "group",
                            activeBgColor: "#000000",
                            activeBgOpacity: 0.08,
                            linearType: 'none', //是否渐变
                            barBorderCircle: false, //启用分组柱状图半圆边框
                            // barBorderRadius: [], //自定义4个圆角半径[左上,右上,右下,左下]（请关闭上面按钮）
                            width: 20, //条状图每个柱子的图形宽度
                            seriesGap: 2 //多series每个柱子之间的间距
                        }
                    }
                },
                
                chartsDataColumn1: {
                    categories: ["门店6","门店2","门店3","门店1","门店13","门店14", "门店16","门店5","门店7","门店6","门店2","门店3","门店1","门店13","门店14", "门店16","门店5","门店7"],
                    series: [
                        {
                          "name": "楼盘报备量统计",
                          "data": [35,36,150,33,13,34,31,33,13,200,36,31,100,13,90,31,250,13],
                          color: '#fe6155'
                        }
                    ],
                },
            };
        },
        onLoad() {},
        methods: {
            
        }
    };
</script>

<style lang="scss">
    page{
        background-color: #f5f5f5;
    }
    .box{
        background-color: #fff;
        padding: 30rpx 0;
    }
</style>
